<!--
 要情 指令下发
 @Author: zhanbh
 @Date: 2021-04-15
-->
<template>
  <div style="background: #fff; padding: 20px">
    <module-card>
      <template #header>基本信息</template>
      <edit-form ref="form" label-width="calc(5em + 32px)" :model="form" :fields="fields" :editable="false">
        <template #item-time>
          <span>
            {{
              form.yxqq
                ? `${form.yxqq.slice(0, 4)}-${form.yxqq.slice(4, 6)}-${form.yxqq.slice(6, 8)} ${form.yxqq.slice(
                    8,
                    10
                  )}:${form.yxqq.slice(10, 12)}:${form.yxqq.slice(12, 14)} 至 ${form.yxqz.slice(
                    0,
                    4
                  )}-${form.yxqz.slice(4, 6)}-${form.yxqz.slice(6, 8)} ${form.yxqz.slice(8, 10)}:${form.yxqz.slice(
                    10,
                    12
                  )}:${form.yxqz.slice(12, 14)}`
                : '长效'
            }}
          </span>
        </template>
        <template #item-updateTime>
          <span>
            {{
              `${form.updateTime.slice(0, 4)}-${form.updateTime.slice(4, 6)}-${form.updateTime.slice(
                6,
                8
              )} ${form.updateTime.slice(8, 10)}:${form.updateTime.slice(10, 12)}:${form.updateTime.slice(12, 14)}`
            }}
          </span>
        </template>
        <template #item-fileHolders>
          <dg-upload v-model="form.fileHolders" :server-url="'./'" size="30m" tip-msg="上传文件限制大小为 30M">
            <template slot="fileList" slot-scope="{ type, name, size }">
              <i :class="`dg-icon-${type}`"></i>
              {{ `${name} (${size / 1024})KB` }}
            </template>
          </dg-upload>
        </template>
      </edit-form>
    </module-card>
    <module-card>
      <template #header>签收信息</template>
      <el-form ref="form" label-width="80px">
        <div class="table-filter">
          <div>
            <el-form-item label="签收单位">
              <el-cascader
                style="width: 400px"
                :props="{multiple: true, checkStrictly:true}"
                v-model="jsdwdm"
                :options="constant.BM_DEPT"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="签收状态">
              <dg-select v-model="condition.qszt.value" :data="constant.BM_QSZT" clearable />
            </el-form-item>
          </div>
          <div style="text-align: left">
            <el-button type="primary" @click="() => $refs.table.searchForm()">查询</el-button>
          </div>
        </div>
      </el-form>

      <comm-table
        ref="table"
        class="table"
        :condition="condition"
        :columns="columns"
        :url="`/v1/ggxx-signin/${$route.params.id}/search`"
      >
        <template slot-scope="{ row }">
          <div>
            <dg-radio-group
              v-model="row.type"
              :data="[
                { label: '是', value: '1' },
                { label: '否', value: '0' }
              ]"
              size="small"
              call-off
            ></dg-radio-group>
          </div>
        </template>
      </comm-table>
    </module-card>
    <div>
      <dg-button size="mini" @click="() => $router.go(-1)">关闭</dg-button>
    </div>
  </div>
</template>

<script>
import ModuleCard from '@/components/layout/module-card';
import EditForm from '@@/edit-form';
import { noticeDetail } from '@/api/notice';
import { mapState } from 'vuex';
import { BM_QSZT, BM_DEPT, DM_GGXX_GGLX } from '@/common/codeDic';
export default {
  name: 'NoticeDetail',
  components: {
    EditForm,
    ModuleCard
  },
  data() {
    return {
      jsdwdm: [],
      condition: {
        jsdwdm: {
          value: '',
          op: '='
        },
        qszt: {
          value: '',
          op: '='
        }
      },
      columns: [
        { label: '序号', type: 'index', width: 70 },
        { label: '签收状态', prop: 'qszt', code: BM_QSZT },
        { label: '签收单位', prop: 'qsdwdm', code: BM_DEPT },
        { label: '签收时间', prop: 'qssj' },
        { label: '签收人', prop: 'qsrxm' }
      ],
      fields: [
        {
          prop: 'id',
          label: '编号',
          col: 12
        },
        {
          prop: 'gglx',
          label: '公告类型',
          col: 12,
          code: DM_GGXX_GGLX
        },
        {
          prop: 'time',
          label: '公告有效时间',
          col: 12
        },
        {
          prop: 'ggzw',
          label: '公告正文'
        },
        {
          prop: 'createDept',
          label: '创建单位',
          col: 12,
          code: BM_DEPT
        },
        {
          prop: 'createUsername',
          col: 12,
          label: '创建人'
        },
        {
          prop: 'createTime',
          col: 12,
          label: '创建时间'
        },
        {
          prop: 'updateDept',
          col: 12,
          label: '发布单位',
          code: BM_DEPT
        },
        {
          prop: 'fbrxm',
          col: 12,
          label: '发布人'
        },
        {
          prop: 'updateTime',
          col: 12,
          label: '发布时间'
        },
        {
          prop: 'fileHolders',
          col: 12,
          label: '附件'
        }
      ],
      form: {
        id: '',
        gglx: '',
        time: '',
        ggzw: '',
        createDept: '',
        createUsername: '',
        createTime: '',
        updateTime: '',
        fbrxm: '',
        updateDept: '',
        fileHolders: [],
        yxqq: '',
        yxqz: ''
      }
    };
  },
  watch: {
    jsdwdm(val) {
      this.condition.jsdwdm = val.length ? val[val.length - 1] : '';
    }
  },
  computed: {
    ...mapState(['constant'])
  },

  mounted() {
    this.$store.dispatch('getConstant', ['BM_QSZT']);
    this.$store.dispatch('getConstantTree', ['BM_DEPT']);
    noticeDetail(this.$route.params.id).then(({ data }) => {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = data[key];
      });
      if (data.yxqq) {
        this.form.time = [data.yxqq, data.yxqz];
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.yq-order {
  height: calc(100vh - 11rem);
}
.edit-form {
  max-width: 1000px;
}
</style>
